import './App.css';

import React, { Component, lazy, Suspense } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import Loading from './components/Loading'

let Index = lazy(() => import('./views/Index'))
let Login = lazy(() => import('./views/Login'))
let Register = lazy(() => import('./views/Register'))
let Search = lazy(() => import('./views/Search'))
let NotFound = lazy(() => import('./views/NotFound'))
let Detail = lazy(() => import('./views/Detail'))
let Collection = lazy(() => import('./views/Collection'))

class App extends Component {
  render() {
    return (
      <div className='app'>

        {/* 定义一级路由 */}
        <Suspense fallback={<Loading />}>
          <Switch>
            <Route path="/index" component={Index} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/search" component={Search} />
            <Route exact path="/detail" component={Detail}/>
            <Route exact path="/collection" component={Collection} />
            <Redirect exact from='/' to="/index" />
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>

      </div>
    );
  }
}

export default App;
